<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <style>
        li{
            border : 1px dashed #999;
            margin: 5px;
            line-height: 35px;
            padding-left: 5px;
            font-size: 14px;
            width: 100%;
        }
        li:hover{
            background-color: orange;
            transition: all 0.8s ease
        }

        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateY(80px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.6s ease;
        }

        /* 下面的 .v-move  和  .v-leave-active 联用,能实现列表后续的元素圆滑的往上走的效果 */
        .v-move{
            transition: all 0.6s ease;
        }

        .v-leave-active{
            position: absolute;
        }

        
    
    
    </style>
</head>
<body>
    <div id="app">
        
        <div>
            <label>
                Id:
                <input type="text" v-model="id">
            </label>
        
            <label>
                Name:
                <input type="text" v-model="name">
            </label>
        
            <input type="button" value="添加" @click="add">
        </div>

        <!-- transition-group 标签  默认在HTML上以span标签渲染 tag属性 : 可以将transtion转化为任意其他属性 -->
        <!-- 用v-for 渲染出来的列表不能使用transition过渡 , 需要使用transition-group -->
        <!-- 添加 appear 属性 : 可以使列表最开始时,以动画的形式展现出来 -->
        <transition-group appear tag="ul">
            <li v-for="(item,index) of list" :key="item.id" @click="del(index)">
                {{item.id}} --- {{item.name}}

            </li>
        </transition-group>   
    </div>
    <script>
        new Vue({
            el : '#app',
            data : {
                id: '',
                name: '',
                list: [
                    { id: 1, name: '赵高' },
                    { id: 2, name: '秦桧' },
                    { id: 3, name: '严嵩' },
                    { id: 4, name: '魏忠贤' }
                ]
            },
            methods : {
                add(){
                    this.list.unshift({id:this.id,name:this.name})
                    this.id=this.name=''
                },
                del(i){
                    this.list.splice(i,1)
                }
            }
        })
    
    
    </script>
</body>
</html>